<template>
    <div>
        <z-header>登录</z-header>

        <!-- 登录区域 -->
        <section class="page">
            <div class="login-page">
                <!-- 登录框 -->
                <div class="login-wrap">
                    <div class="login-text">
                      
                        <van-field
                            v-model="username"
                            icon-prefix="iconfont"
                            right-icon="guanbi"
                            placeholder="用户名/邮箱/已验证手机"
                            @click-right-icon="clearUserText"
                            />
                        <!-- <i class="iconfont icon-close" data-close="username" v-show="!usernameClose" @click="clearText"></i> -->
                    </div>
                    <div class="login-text">
                     
                        <van-field
                            class="pwd-style"
                            v-model="password"
                            icon-prefix="iconfont"
                            right-icon="guanbi"
                            placeholder="请输入密码"
                            type="password"
                            @click-right-icon="clearPwdText"
                            ref="passwordText"
                            v-if="!passwordType"
                            />
                            <van-field
                            class="pwd-style"
                            v-model="password"
                            icon-prefix="iconfont"
                            right-icon="guanbi"
                            placeholder="请输入密码"
                            type="text"
                            @click-right-icon="clearPwdText"
                            ref="passwordText"
                            v-else
                            />
                        <div>
              <i
                class="iconfont iconfont-guanbi"
                data-close="password"
                v-show="!passwordClose"
              ></i>
              <i
                class="iconfont iconfont-biyanjing eye"
                @click="changeType"
                v-if="!passwordType"
              ></i>
              <i
                class="iconfont iconfont-yanjing eye"
                @click="changeType"
                v-else
              ></i>
              <router-link tag="span" to="./forget-password"
                >忘记密码</router-link
              >
            </div>
                    </div>
                </div>
                <!-- 错误提示 -->
                <div class="login-error">{{errMsg}}</div>
                <button class="login-button" :class="{'active' : username.trim()&&password.trim()}" @click="submitLogin">登 录</button>
                <!-- 快捷导航 -->
                <div class="quick-nav">
                    <router-link tag="span" class="register-button" to="./register">快速注册</router-link>
                </div>
                <!-- 其他登录方式 -->
                <div class="other-login">
                    <div class="other-head">
                        <i></i>
                        <span>其它登录方式</span>
                        <i></i>
                    </div>
                    <div class="other-con">
                        <div class="login-icon">
                            <i class="iconfont icon-tubiao215"></i>
                            <span>QQ</span>
                        </div>
                        <div class="login-icon">
                            <i class="iconfont icon-weixin1"></i>
                            <span>微信</span>
                        </div>
                    </div>
                    <p>登录即代表您已同意<a>知心购隐私政策</a></p>
                </div>
            </div>
        </section>

    </div>
</template>

<script>
import zHeader from '@/components/common/z-header.vue'
import { login } from '../../api'
import {Toast} from "vant"
import {mapMutations} from  "vuex"
    export default {
        components:{
            zHeader
        },
        data() {
            return {
                username: "",
                password: "",
                errMsg: "",
                usernameClose: true,
                passwordClose: true,
                passwordType: 0
            }
    },
        methods: {
           ...mapMutations(["setToken"]),

           clearUserText(){
               this["username"] = ""
           },
           clearPwdText(){
               this.password = ""
           },
           changeType(){
               this.passwordType = !this.passwordType
           },
           //登录
           submitLogin(){
               console.log('----');
               login({username:this.username, password:this.password}, (res) =>{
                   console.log(res);
                   if(res.status === 0){
                       this.setToken({token:res.data.token})
                       //登录完成触发获取用户信息
                       this.$store.dispatch('getInfo')
                       this.$store.dispatch('getCartData')
                       this.$router.replace("/user")
                   }else{
                       this.errMsg = res.msg ? res.msg : "登录失败！"
                       Toast.fail(this.errMsg)
                   }
               })
           }
        }
    }
</script>

<style lang="scss" scoped>
@import '../../common/style/mixin';
.page {
    padding: 0 50px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    .login-page {
        margin-top: 84px;

        .login-wrap {
            width: 100%;

            .login-text {
                @include fj;
                width: 100%;
                height: 60px;
                line-height: 60px;
                padding: 20px 0;
                margin-top: 20px;
                border-bottom: 1px solid #dcdcdc;

                .iconfont {
                    font-size: 26px;
                    color: #CCCCCC;

                    &.eye {
                        padding: 0 30px;
                        font-size: 40px;
                        border-right: 1px solid #dcdcdc;
                    }
                }

                input {
                    width: 100%;
                    height: 100%;
                    margin-right: 20px;
                    line-height: 60px;
                    color: #222;
                    font-size: 32px;

                    &.login-password {
                        width: 50%;
                    }
                }

                span {
                    padding-left: 20px;
                    font-size: 30px;
                }

                div {
                    display: flex;
                }
            }
        }

        .login-error {
            width: 100%;
            height: 40px;
            line-height: 40px;
            padding: 30px 0;
            color: $red;
            font-size: 26px;
        }

        .login-button {
            width: 100%;
            height: 100px;
            text-align: center;
            line-height: 100px;
            color: #fff;
            font-size: 32px;
            background: rgba(246, 53, 21, .5);
            @include borderRadius(60px);

            &.active {
                background: rgb(246, 53, 21)
            }
        }

        .quick-nav {
            padding: 40px 0;
            width: 100%;
            text-align: right;

            .register-button {
                color: #999;
                font-size: 28px;
            }
        }

        .other-login {
            width: 100%;
            margin-top: 100px;

            .other-head {
                @include fj;

                i {
                    flex: 1;
                    height: 1px;
                    margin-top: 18px;
                    background: #dcdcdc;
                }

                span {
                    flex: 1;
                    text-align: center;
                    font-size: 28px;
                    color: #dcdcdc;
                }
            }

            .other-con {
                display: flex;
                width: 320px;
                padding: 40px 0;
                margin: 0 auto;

                .login-icon {
                    display: flex;
                    flex-direction: column;
                    width: 96px;
                    margin: 0 30px;
                    text-align: center;

                    .iconfont {
                        width: 100%;
                        height: 96px;
                        line-height: 96px;
                        font-size: 60px;
                        color: #15B8F5;
                        background: #E7F7FE;
                        @include borderRadius(50%);

                        &.icon-weixin1 {
                            font-size: 50px;
                            color: #09BB07;
                            background: #E6F8E6;
                        }
                    }

                    span {
                        padding-top: 20px;
                        color: #999;
                    }
                }
            }

            p {
                margin-top: 20px;
                width: 100%;
                text-align: center;
                color: #999;

                a {
                    color: #409eff;
                }
            }
        }
    }
}
.pwd-style.van-cell.van-field {
  width: 60%;

  &::after {
    border: none;
  }
}
</style>